<template>
<div class="song-list">
    <ul>
        <li v-for="(item,index) in dataSource" :key="item.id" class="item" @click="songClickAction(item)">
            <p  class="index">{{index+1}}</p>
            <div class="content">
                <h3 class="name">{{item.name}}</h3>
                <div class="nameAndAl">
                    <span class="info">{{item.ar}}</span>
                    <span>-</span>
                    <span class="alname">{{item.al.name}}</span>
                </div>
            </div>
            <div v-if="play===index" class="gifImage">
                <img src="~assets/img/music.gif">
            </div>
        </li>
    </ul>
</div>

</template>

<script>
import { getPlaylist } from '@/api'

export default {
    name:'SongLsitPage',
    data() {
        return {
            // 数据源
            dataSource:[],
            play:0
        }
    },
    props:{
    },
    async mounted() {
      const res = await getPlaylist()
      console.log(res)
      const playList = res.hotSongs.map(item=>({
            id:item.id,
            name:item.name,
            // 对一些合唱进行数据处理
            ar:item.ar.map(arItem=>arItem.name).join('/'),
            // ar:item.ar,//歌手列表
            al:{
                name:item.al.name,
                picUrl:item.al.picUrl
            }
        }))
        this.dataSource = playList.slice(0,30)
    },
    methods: {
        songClickAction(item){
            // console.log(JSON.stringify(item));

        }
    },


}
</script>

<style scoped>
.song-list{
  height: 400px;
  overflow: scroll;
}
.song-list::-webkit-scrollbar{
  width: 6px;
  height: 1px;
}
.song-list::-webkit-scrollbar-thumb{
  background-color: rgba(238, 238, 238, 0.979);
}
.item{
    border-bottom:1px solid #ddd ;
    display: flex;
    padding: 10px;
}

.index{
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
}
.centent{
    flex: 1;
    height: 40px;
    display: flex;
    flex-direction: column  ;
    justify-content:center ;
    align-items:flex-start ;
    font-size: 14px;
}
.name{
    font-size: 16px;
    font-weight: normal;
}
.info{
    font-size: 14px;
    color: #555;
}
.alname{
    font-size: 13px;
    font-weight:600;
    color: rgb(88, 88, 71);
}
.nameAndAl{
    margin-top:4px;
}
.gifImage{
    margin-top:20px ;
    margin-left:540px ;

}
.gifImage img{
    width: 20px;
    height: 20px;
}


</style>
